<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<div class="welcome">Welcome! Gavin</div>
		<div class="gavinList f f-a-c f-w-w">
			<div @click="goUseProfile" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/user/17.png" class="topImg" alt="" />
					<div class="profile">My profile</div>
				</div>
				<div class="count">Provide personal details and how we can reach you</div>
			</div>
			<div class="gainItem hand f f-j-c f-d-c">
				<div @click="goPayment" class="name f f-a-c">
					<img src="/src/assets/user/19.png" class="topImg" alt="" />
					<div class="profile">Payment</div>
				</div>
				<div class="count">Review payments, payouts and coupons</div>
			</div>
			<div @click="goPayoutMethod" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/user/20.png" class="topImg" alt="" />
					<div class="profile">Notifications</div>
				</div>
				<div class="count">Choose notification preferences and how you want to be contacted</div>
			</div>
			<div @click="goNotifications" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/user/22.png" class="topImg" alt="" />
					<div class="profile">Help & Support</div>
				</div>
				<div class="count">Learn how to use Xpert, fix a problem, and get answers to your questions.</div>
			</div>
		</div>
		<!-- 下面的提示Need to deactivate your account? -->
		<div class="deactivate">
			<div class="deactivateCon">Need to deactivate your account?</div>
			<div @click="deactivateA" class="deactivateA hand">Take care of that now</div>
		</div>
		<!-- faq -->
		<div class="faq">
			<div class="faqTop">FAQ</div>
			<div class="faqBody">
				<div v-for="(item, index) in list" @click="goDetils(item)" :key="index" class="faqItem hand f f-a-c f-j-b p-l-10 p-r-10">
					<div class="countNei">{{ item.title }}</div>
					<img src="/src/assets/user/2.png" class="img" alt="" />
				</div>
				<div @click="router.push('/BlogFAQ')" class="more hand">More</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from "vue";
	import { FaqsList, CreateVerify } from "@/api/xpert.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	const statusTab = ref(1);
	const total = ref(0);
	const pageNum = ref(1);
	const list = ref([]);
	onMounted(() => {
		faqList();
		window.addEventListener("scroll", handleScroll);
	});
	const goUseProfile = () => {
		router.push({ path: "/UseMyProfile" });
	};
	const goPayoutMethod = () => {
		router.push({ path: "/UseNotifications", query: { act: 2 } });
	};
	// 会哦去FAQ
	const faqList = async () => {
		let n = await FaqsList({
			pageNum: pageNum.value
		});
		total.value = n.data.total;
		list.value = [...list.value, ...n.data.list];
	};
	const goNotifications = () => {
		router.push({
			path: "/HelpSupport",
			query: {
				act: 1
			}
			//  path: "/UseHelpSupport"
		});
	};
	const deactivateA = () => {
		router.push({ path: "/BuyerDeactiveAccount" });
	};
	// 去goPayment
	const goPayment = () => {
		router.push({ path: "/UsePayment" });
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
